<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <title>XXXX实验室</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="/layer/layui/css/layui.css">
  <link rel="stylesheet" href="/layer/css/global.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

  <div id="app">
<div th:insert="~{portal/fragments/header :: header}"></div>
    <div class="fly-panel fly-column">
      <div class="layui-container">
        <ul class="layui-clear">
          <li class="layui-hide-xs layui-this"><a href="/">首页</a></li>
          <li><a href="jie/index.html">提问</a></li>
          <li><a href="jie/index.html">分享<span class="layui-badge-dot"></span></a></li>
          <li><a href="jie/index.html">讨论</a></li>
          <li><a href="jie/index.html">建议</a></li>
          <li><a href="jie/index.html">公告</a></li>
          <li><a href="jie/index.html">动态</a></li>
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>

          <!-- 用户登入后显示 -->
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="user/index.html">我发表的贴</a></li>
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a
              href="user/index.html#collection">我收藏的贴</a></li>
        </ul>

        <div class="fly-column-right layui-hide-xs">
          <span class="fly-search"><i class="layui-icon"></i></span>
          <a href="jie/add.html" class="layui-btn">发表新帖</a>
        </div>
        <div class="layui-hide-sm layui-show-xs-block"
          style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
          <a href="jie/add.html" class="layui-btn">发表新帖</a>
        </div>
      </div>
    </div>

    <div class="layui-container">

      <!-- 轮播图区域 -->
      <div style="margin-bottom:20px">
        <div class="layui-carousel " id="crl">
          <div carousel-item>
            <div>条目1</div>
            <div>条目2</div>
            <div>条目3</div>
            <div>条目4</div>
            <div>条目5</div>
          </div>
        </div>
      </div>

      <!--内容主体区域 左侧列表 右侧消息列表-->
      <div style=" background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15 padding: 20px;">
          <div class="layui-col-md9">
            <div class="layui-card ">
              <div class="layui-card-header">近期成果</div>
              <div class="layui-card-body">
                <ul class="fly-list ">
                  <li style="padding: 15px;" >
                    <h2>
                      <a href="/article/article.html">tag</a>
                      <a>title</a>
                    </h2>
                    <div class="fly-list-info">
                       date && publisher
                    </div>
                    <div class="fly-list-badge">
                      <span class="layui-badge layui-bg-green">badge</span>
                   </div>
                  </li>
                </ul>

              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-card">
              <div class="layui-card-header">最新消息</div>
              <div class="layui-card-body">
                最新消息列表<br>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>


    <div class="fly-footer">
      <p><a href="http://www.uzivn.cn/" target="_blank">XXXX学校 XXXX团队</a> 2020 &copy; </p>
      <p>
        <a href="http://www.uzivn.cn/"
          target="_blank">UZIVN 出品</a>
      </p>
    </div>
  </div>

    <script src="/layer/layui/layui.js"></script>
    <script>

      layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
          elem: '#crl'
          , width: '100%' //设置容器宽度
          , arrow: 'always' //始终显示箭头
          //,anim: 'updown' //切换动画方式
        });
      });

    </script>

</body>

</html>